<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验2_9</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .top-nav {
            background: black;
            padding: 10px 20px;
        }
        .top-nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
        }

        .top-nav a.school {
            background: white;
            color: steelblue; 
            padding: 10px;
        }

        .banner {
            background: lightgrey;
            padding: 50px 20px;
            text-align: left;
        }
        .banner h1 {
            font-size: 70px;
            color: black;
            margin-bottom: 20px;
			font-weight: normal;
        }
        .banner button {
            background: orange;
            border: none;
            padding: 8px 15px;
            color: white;
        }

        .content {
            max-width: 1200px;
            margin: 30px auto;
            display: flex;
            justify-content: space-around;
            padding: 0 20px;
        }
        .content .item {
            text-align: center;
            flex: 1;
            padding: 0 20px;
            border-right: 1px solid black;
        }
		
        .content .item:last-child {
            border-right: none;
        }
        .content .item h2 {
            color: black;
            margin-bottom: 10px;
			font-weight: normal;
        }
    </style>
</head>
<body>
    <div class="top-nav">
        <a href="#">首页</a>
        <a href="#" class="school">学校概况</a> 
        <a href="#">机构设置</a>
        <a href="#">人才培养</a>
        <a href="#">科学研究</a>
    </div>

    <div class="banner">
        <h1>天津职业技术师范大学</h1>
        <button>查看更多>></button>
    </div>

    <div class="content">
        <div class="item">
            <h2>新闻</h2>
            <p>内容。。。</p>
        </div>
        <div class="item">
            <h2>图片展示区</h2>
            <p>内容。。。</p>
        </div>
        <div class="item">
            <h2>链接区</h2>
            <p>内容。。。</p>
        </div>
    </div>
</body>
</html>